<template>
  <div>
    <div class="card" style="margin-bottom:18px ">
      <el-input v-model="data.name" style="width: 280px;margin-right: 10px" placeholder="请输入学生名称查询" :prefix-icon="Search"/>
      <el-button type="primary" round style="margin-left: 10px"  @Click="load">查询</el-button>
    </div>
  </div>
  <div class="card " style="margin-bottom:18px;">
    <div>
    <el-button type="primary" round @Click="handeladd">新增</el-button>
    </div>
    <div>
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="70" />
        <el-table-column prop="username" label="学生账号" width="150"/>
       
        <el-table-column prop="name" label="学生姓名" />
        <el-table-column prop="phone" label="学生手机号"  />
        <el-table-column prop="email" label="学生邮箱"  />
        <el-table-column prop="className" label="班级"  />
        <el-table-column prop="sex" label="性别"/>
        <el-table-column prop="birth" label="生日"  />

        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" size="small" @Click="handeledit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @Click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="card">
      <el-pagination v-model:page-size="data.pageSize" v-model:current-page="data.pageNum"
                     @current-change="handelCurrentChange"
                     background layout="prev, pager, next" :total="data.total" />
  </div>
    <el-dialog  width="35%" v-model="data.formVisible" title="学生信息" destroy-on-close>
      <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right" style="padding-right: 40px" >
      <el-form-item  prop="username" label="学生账号" >
        <el-input v-model="data.form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="password" label="学生密码" >
        <el-input show-password v-model="data.form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生名称" >
        <el-input v-model="data.form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" >
        <el-input v-model="data.form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" >
        <el-input v-model="data.form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="班级" >
        <el-input v-model="data.form.className" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" >
        <el-radio-group v-model="data.form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日" >
        <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="data.form.birth"></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
    <div class="dialog-footer">
      <el-button @click="data.formVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
</template>
  </el-dialog>

</template>
<script setup>
import {reactive,ref} from "vue";
  import { Search } from '@element-plus/icons-vue'
  import request from "@/utils/request";
  import {ElMessage, ElMessageBox} from "element-plus";

  const baseurl='/student'

  const  data =reactive({
  username:"",
  name:"",
  total:0,
  tableData:[],
  pageNum: 1,//当前页数
  pageSize:5,//每一页的个数
  formVisible:false,
  form:{}
})

  const load=() =>{
    request.get(baseurl +"/selectPage",{
      params:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        username: data.username,
        name: data.name,
      }
    }).then(res=>{
    data.tableData = res.data?.list || []
      data.total = res.data.total || 0
    })
  }

  //调用方法获取数据
  load();

  const handelCurrentChange = () => {
  //翻页后重新加载数据页面
  load()
}

  const reset =()=>{
      data.username = ""
      data.name = ""
      load()
  }



  const del =(id)=>{
    ElMessageBox.confirm('删除数据后无法回复，您确认删除吗？','删除确认',{type:'warning'}).then(res=> {
          request.delete(baseurl + '/delete/' + id).then(res => {
            if (res.code === '200') {
              load()
              ElMessage.success("删除成功")
            } else {
              ElMessage.error(res.msg)
            }
          })
        }) .catch(res => {})
  }

//表单校验
const rules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})

const formRef = ref()

const handeladd =()=>{
  data.form= { }
  data.formVisible=true
}


const handeledit =(row)=>{
  data.form=JSON.parse(JSON.stringify(row))
  data.formVisible=true;
}

  //保存数据到后台
const save =()=>{
    formRef.value.validate((valid) => {
      if(valid){
        request.request( {
          url:data.form.id ? baseurl + '/update': baseurl + '/add',
          method:data.form.id ? 'PUT' : 'POST',
          data:data.form
        }).then(res => {
          if (res.code ==='200'){
            load()
            data.formVisible = false //弹窗关闭
            ElMessage.success("操作成功")
          }else{
            ElMessage.error(res.msg)
          }
        })
      }
    })
  }
const handleImgUploadSuccess =(res=>{
  data.form.avatar=res.data

})

</script>

<style>
 .search-bar {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
  }
  
  .search-input {
    width: 280px;
    margin-right: 10px;
  }
  
  .action-buttons {
    margin-bottom: 18px;
  }
  
  .data-table {
    margin-bottom: 18px;
  }
  
  .pagination {
    margin-bottom: 18px;
  }
  .el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #333;
    --el-button-border-color: var(--el-color-primary);
    --el-button-outline-color: var(--el-color-primary-light-5);
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
    --el-button-active-bg-color: var(--el-color-primary-dark-2);
    --el-button-active-border-color: var(--el-color-primary-dark-2);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .el-pager li.is-active {
    background-color: #333;
    color: var(--el-color-white);
}
.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #24527a;
    --el-button-border-color: var(--el-color-primary);
    --el-button-outline-color: var(--el-color-primary-light-5);
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
    --el-button-active-bg-color: var(--el-color-primary-dark-2);
    --el-button-active-border-color: var(--el-color-primary-dark-2);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #24527a;
    --el-button-border-color: #214360;
    --el-button-outline-color: #e7f6f3;
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: #e7f6f3;
    --el-button-hover-bg-color: #f9b44c;
    --el-button-hover-border-color: #88d4c1;
    --el-button-active-bg-color: #e7f6f3;
    --el-button-active-border-color: #f9b44c;
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: #f9b44c;
    --el-button-disabled-border-color: #f9b44c;
}
::-webkit-validation-bubble-arrow-clipper[data-v-cf8a8c64] .el-pagination.is-background .el-pager li.is-active {
    background-color: #24527a;
    color: var(--el-color-white);
}</style>